import { FormRule, PrimaryTableCol, Space, TableRowData } from 'tdesign-vue-next';

import { ActionBarItem } from '@/components/common-action-bar/index.vue';
import { t } from '@/locales';
import { tableActionBtn, tableSwitch } from '@/utils/action';

export interface FormItem {
  id?: number;
  name: string;
  description: string;
  menus: any[];
  display: number;
}

export const ACTION_BAR_DATA: ActionBarItem[] = [
  { text: 'common.add', theme: 'primary', auth: ['system:role:create'], key: 'addShow' },
];

export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
  { colKey: 'id', title: 'ID', width: 100 },
  { colKey: 'name', title: () => t('pages.role.name') },
  { colKey: 'description', title: () => t('pages.role.desc') },
  { colKey: 'updatedAt', title: () => t('common.createAt') },
  {
    title: () => t('common.status'),
    colKey: 'display',
    width: 100,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['system:role:status']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    colKey: 'action',
    title: () => t('common.operation'),
    width: 150,
    cell(h, { row }) {
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['system:role:detail'] });
      const actionDelete = tableActionBtn({ h, type: 'delete', row, auths: ['system:role:delete'] });
      return h(Space, () => {
        return [actionEdit, actionDelete];
      });
    },
  },
];

export const FORM_DATA: FormItem = {
  id: 0,
  name: '',
  description: '',
  menus: [],
  display: 1,
};

export const FORM_RULES: Record<string, FormRule[]> = {
  name: [{ required: true }],
};
